/**
 * 使用grid布局
 * 区别与 flex 的一维弹性布局，grid是基于二维平面的布局方式，这意味着布局的可控性将大大增强
 * grid-container： 将页面划分为12*12的网格，视图窗口为 100vh 也就是整个可见页面的窗口大小
 * 需要注意的是，grid布局后，其父容器只会直接将其直接子元素看成子容器，也就是说，在子容器中使
 * 用 cloum-* 或 row-* 是无效的。
 */

/* css变量值 */
:root{
	/* 网格间距 */
	--gap: 3px;
	/* 网格子项默认背景颜色 */
	--bkColorItem:white;
	/* 网格父容器背景颜色 */
	--bkColor:#dee1e6;
}

/* 在页面上画出一个列数为12（最大宽度250px），行数最小为60px，可以无限制的网格 */
.grid-container{
	box-sizing: border-box;
	min-height: 100vh;
	background-color:var(--bkColor) ;
	display: grid;
	grid-template-columns:repeat(12,minmax(auto,250px));
	/* grid-template-rows:repeat(auto-fill,minmax(auto,60px)); */
	grid-auto-rows: minmax(60px, auto);
	grid-gap: var(--gap);
}

/* 弹出框使用 */
.grid-container-s{
	box-sizing: border-box;
	max-height: 500px;
	display: grid;
	grid-template-columns:repeat(12,minmax(auto,250px));
	grid-auto-rows: minmax(60px, auto);
	grid-gap: var(--gap);
}

.grid-container > div{
	background-color: var(--bkColorItem);
	/* 网格的类容超出时，会出现滚动条 */
	overflow: auto;
	-webkit-overflow-scrolling:touch;
}
/* 网格的类容超出时，隐藏滚动条 */
.grid-container  > div::-webkit-scrollbar{
	display: none;
}

/* 表示跨度的列数，
*  子容器会自动寻找位置，以使其可以正确的放下所需要的列数
*/
.cloum-1{grid-column: auto / span 1;}
.cloum-2{grid-column: auto / span 2;}
.cloum-3{grid-column: auto / span 3;}
.cloum-4{grid-column: auto / span 4;}
.cloum-5{grid-column: auto / span 5;}
.cloum-6{grid-column: auto / span 6;}
.cloum-7{grid-column: auto / span 7;}
.cloum-8{grid-column: auto / span 8;}
.cloum-9{grid-column: auto / span 9;}
.cloum-10{grid-column: auto / span 10;}
.cloum-11{grid-column: auto / span 11;}
.cloum-12{grid-column: auto / span 12;}

/* 表示跨度的行数，提供最多划分12格子的行数跨度（也就是高度 12*60px）*/
.row-1{grid-row: auto / span 1;}
.row-2{grid-row: auto / span 2;}
.row-3{grid-row: auto / span 3;}
.row-4{grid-row: auto / span 4;}
.row-5{grid-row: auto / span 5;}
.row-6{grid-row: auto / span 6;}
.row-7{grid-row: auto / span 7;}
.row-8{grid-row: auto / span 8;}
.row-9{grid-row: auto / span 9;}
.row-10{grid-row: auto / span 10;}
.row-11{grid-row: auto / span 11;}
.row-12{grid-row: auto / span 12;}

.flex-container{
	display: flex;
	flex-wrap:wrap;
}

.flex-item-1{flex-grow: 1;}
.flex-item-2{flex-grow: 2;}
.flex-item-3{flex-grow: 3;}
.flex-item-4{flex-grow: 4;}
.flex-item-5{flex-grow: 5;}
.flex-item-6{flex-grow: 6;}
.flex-item-7{flex-grow: 7;}
.flex-item-8{flex-grow: 8;}
.flex-item-9{flex-grow: 9;}
.flex-item-10{flex-grow: 10;}
.flex-item-11{flex-grow: 11;}
.flex-item-12{flex-grow: 12;}


/* 小型设备（电话，600px 及以下） */
@media only screen and (max-width: 600px){
	[class*="cloum-"]{
		grid-column: auto / span 12
	}
	[class*="cloum-s-"]{
		grid-column: auto / span 12
	}
	.row-s-6{grid-row: auto / span 6;}
}

/* 中型设备（纵向平板电脑和大型手机，600 像素及以上） */
@media only screen and (min-width: 600px){
	.cloum-s-1{grid-column: auto / span 1;}
	.cloum-s-2{grid-column: auto / span 2;}
	.cloum-s-3{grid-column: auto / span 3;}
	.cloum-s-4{grid-column: auto / span 4;}
	.cloum-s-5{grid-column: auto / span 5;}
	.cloum-s-6{grid-column: auto / span 6;}
	.cloum-s-7{grid-column: auto / span 7;}
	.cloum-s-8{grid-column: auto / span 8;}
	.cloum-s-9{grid-column: auto / span 9;}
	.cloum-s-10{grid-column: auto / span 10;}
	.cloum-s-11{grid-column: auto / span 11;}
	.cloum-s-12{grid-column: auto / span 12;}
}

/* 大型设备（笔记本电脑/台式机，992px 及以上） */
@media only screen and (min-width: 992px){
	.cloum-1{grid-column: auto / span 1;}
	.cloum-2{grid-column: auto / span 2;}
	.cloum-3{grid-column: auto / span 3;}
	.cloum-4{grid-column: auto / span 4;}
	.cloum-5{grid-column: auto / span 5;}
	.cloum-6{grid-column: auto / span 6;}
	.cloum-7{grid-column: auto / span 7;}
	.cloum-8{grid-column: auto / span 8;}
	.cloum-9{grid-column: auto / span 9;}
	.cloum-10{grid-column: auto / span 10;}
	.cloum-11{grid-column: auto / span 11;}
	.cloum-12{grid-column: auto / span 12;}
}